<body style="min-width:500px;">
    <? $this->load->helper('url'); ?>
    <script src="<?php echo base_url('assets/js/chart.js'); ?>"></script>
    <div id="wrap">
        <div class="container">
            <div class="navbar-default navbar-fixed-top">
                <div class="container">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                    </button>
                    <div class="navbar-header">
                        <strong><a href="<? echo base_url(); ?>" class="navbar-brand"> <span class="glyphicon glyphicon-book"></span>  READING LABORATORY</a></strong>
                    </div>
                    <div class="collapse navbar-collapse">
                        <div style="float:right;"><p class="navbar-text">Signed in as root &nbsp; <a href="<? echo base_url('logout') ?>" class="btn btn-xs btn-danger">Logout</a></p></div>
                    </div>
                </div>
            </div>

            <div  style="padding:70px 0px 0px 0px;">
                <div class='col-md-3'>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <ul class="nav nav-pills nav-stacked" id="myTab">
                                <li class="<? if (!isset($activeMenu)) echo 'active' ?> text-center"><a href="#statistics" data-toggle="tab">Dashboard</a></li>
                                <li class="<? if (isset($activeMenu)) {if ($activeMenu == 'students') echo 'active';} ?> text-center"><a href="#students" data-toggle="tab">Students</a></li>
                                <li class="<? if (isset($activeMenu)) {if ($activeMenu == 'sections')echo 'active' ;} ?> text-center"><a href="#sections" data-toggle="tab">Sections</a></li>
                                <li class="<? if (isset($activeMenu)) {if ($activeMenu == 'moderators') echo 'active';} ?> text-center"><a href="#moderators" data-toggle="tab">Moderators</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class='col-md-9'>
                    <div id="menuContent" class="tab-content">   
                        <div class="tab-pane fade <? if (!isset($activeMenu)) echo 'active' ?> in" id="statistics">
                        <div class="well well-lg">
                                <div class="row">
                                    <div class="col-md-6">
                                    <div class="panel panel-primary">
                            <div class="panel-heading text-center "><div class="dashboard">Active Students</div></div>
                            <div class="panel-body">
                                <div class="dashboarlabel"> <?echo count($ActiveStudents)?></div>
                               </div>
                                </div>
                                        </div>
                                    <div class="col-md-6">
                                    <div class="panel panel-danger">
                            <div class="panel-heading text-center "><div class="dashboard">Inactive Students</div></div>
                            <div class="panel-body">
                                <div class="dashboarlabel"> <?echo count($inActiveStudents)?></div>
                               </div>
                                </div>
                                        </div>
                                    </div>
                            <div class="row">
                                    <div class="col-md-6">
                                    <div class="panel panel-info">
                            <div class="panel-heading text-center "><div class="dashboard">Active Sections</div></div>
                            <div class="panel-body">
                                <div class="dashboarlabel"> <?echo count($activeSections)?></div>
                               </div>
                                </div>
                                        </div>
                                    <div class="col-md-6">
                                    <div class="panel panel-warning">
                            <div class="panel-heading text-center "><div class="dashboard">Inactive Sections</div></div>
                            <div class="panel-body">
                                <div class="dashboarlabel"> <?echo count($inactiveSections)?></div>
                               </div>
                                </div>
                                        </div>
                                    </div>
                            
                            <div class="row">
                                    <div class="col-md-6">
                                    <div class="panel panel-primary">
                            <div class="panel-heading text-center "><div class="dashboard">Active Moderators</div></div>
                            <div class="panel-body">
                                <div class="dashboarlabel"> <?echo count($activeModerators)?></div>
                               </div>
                                </div>
                                        </div>
                                    <div class="col-md-6">
                                    <div class="panel panel-danger">
                            <div class="panel-heading text-center "><div class="dashboard">Inactive Moderators</div></div>
                            <div class="panel-body">
                                <div class="dashboarlabel"> <?echo count($inactiveModerators)?></div>
                               </div>
                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    
                    <div class="tab-pane <? if (isset($activeMenu)) {
    if ($activeMenu == 'students') echo 'active';
} ?> fade in" id="students">
                        <div class="panel panel-primary">
                            <div class="panel-heading">Students > <span id="tabNameStudents">Active Students</span></div>
                            <div class="panel-body">
                                <ul class="nav nav-tabs" id="myTablia">
                                    <li class="active text-center"><a href="#activeStudents" data-toggle="tab" onclick='$("#tabNameStudents").text("Active Students");'>Active Students <span class="badge"><? echo count($ActiveStudents)?></span></a></li>
                                    <li class="text-center"><a href="#inactiveStudents" data-toggle="tab" onclick='$("#tabNameStudents").text("Inactive Students");'>Inactive Students <span class="badge"><? echo count($inActiveStudents)?></span></a></li>
                                </ul>
                                <div id="itemContent" class="tab-content">
                                    <div class="tab-pane fade active in" id="activeStudents"  style="padding-top:2%">
                                        <? if (!empty($ActiveStudents)) { ?>
                                        <div class="col-md-12">
                                            <a href="<?echo base_url('/admin/addStudent');?>"  class="btn btn-sm btn-default" style="text-decoration: none">Add Student</a>
                                            <div class="form-inline pull-right" style="margin-bottom:2%">
                                                <div class="form-group">
                                                    <input type="search" class="form-control input-sm light-table-filter" data-table="actStudent" placeholder="Search..">
                                                </div>
                                            </div>

                                        </div>
                                        <? if (isset($activeMenuTab)) if ($activeMenuTab == 'activeStudents') { ?>
                                                <div class="col-md-12">
                                                    <div class="alert alert-success alert-dismissable">
                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                                 <? echo $alert; ?>
                                                    </div>    
                                                </div>
                                                                <? } ?>
                                        <div class="table-responsive">
                                            <table id="ActiveStudents" class="actStudent table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center" width=20%>User Name</th>
                                                        <th class="text-center" width=30%>Student Name</th>
                                                        <th class="text-center" width=10%>Section</th>
                                                        <th class="text-center" width=10%></th>
                                                        <th class="text-center" width=10%></th>
                                                        <th class="text-center" width=15%></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
<? foreach ($ActiveStudents as $student) { ?>
                                                        <tr>
                                                            <td class="text-center"><? echo $student['username'] ?></td>
                                                            <td class="text-center"><? echo $student['firstname'] . ' ' . $student['lastname'] ?></td>
                                                            <td class="text-center"><? echo $student['section_name'] ?></td>
                                                            <td class="text-center"><a href="<? echo base_url('/admin/editStudent/' . $student['user_id'] . ''); ?>" class="btn btn-sm btn-warning" style="text-decoration: none">Edit</a></td>
                                                            <td class="text-center"><button href="#" onclick="deleteConfirm(<? echo $student['user_id'] ?>,'student');"  class="btn btn-sm btn-danger" style="text-decoration: none">Deactivate</button></td>
                                                            <td class="text-center"><button href="#" onclick="resetPassword(<? echo $student['user_id'] ?>,'student');"  class="btn btn-sm btn-primary" style="text-decoration: none">Reset Password</button></td>
                                                        </tr><!--href="<? //echo base_url('/moderator/deleteStudent/'.$student['user_id'].'');    ?>"-->
<? } ?>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div id="ActiveStudentsPager" class="pager">
                                            <form class="form-inline">
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                    <span class="glyphicon glyphicon-backward  prev">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                </div>
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-forward  next">  </span>
                                                    <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <select class="pagesize form-control input-sm "  >
                                                        <option selected="selected"  value="10">10</option>
                                                        <option value="20">20</option>
                                                        <option value="30">30</option>
                                                        <option  value="40">40</option>
                                                    </select></div>
                                            </form>
                                        </div>
                                        <? }else{?> 
                                        <div class="col-md-12">
                                            <div class="pull-right tiptext" <?if (empty($activeSections)) echo 'data-toggle="tooltip" data-placement="top" title="" data-original-title="You cant add students if you dont have an activated section."';?> style="margin-bottom: 1%"><a href="<?echo base_url('/admin/addStudent');?>"  class="tiptext btn btn-sm  btn-default <?if (empty($activeSections)) echo 'disabled'?>"  style="text-decoration: none;">Add Student</a></div>
                                        </div>
                                         <? if (isset($activeMenuTab)) if ($activeMenuTab == 'activeStudents') { ?>
                                                <div class="col-md-12">
                                                    <div class="alert alert-success alert-dismissable">
                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                                 <? echo $alert; ?>
                                                    </div>    
                                                </div>
                                                                <? } ?>
<h3 class="text-center text-danger">NO ACTIVE STUDENTS AVAILABLE TO VIEW.</h3><?}?>
                                    </div>	

                                    <div class="tab-pane fade in" id="inactiveStudents"  style="padding-top:2%">
                                        <div class="col-md-12">
<? if (!empty($inActiveStudents)) { ?>
                                                <div class="form-inline pull-right" style="margin-bottom:2%">
                                                    <div class="form-group">
                                                        <input type="search" class="form-control input-sm light-table-filter" data-table="inactStudent" placeholder="Search..">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="table-responsive">
                                                <table id="inActiveStudents" class="inactStudent table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center" width=30%>User Name</th>
                                                            <th class="text-center" width=30%>Student Name</th>
                                                            <th class="text-center" width=20%>Section</th>
                                                            <th class="text-center" width=15%></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <? foreach ($inActiveStudents as $student) { ?>
                                                            <tr>
                                                                <td class="text-center"><? echo $student['username'] ?></td>
                                                                <td class="text-center"><? echo $student['firstname'] . ' ' . $student['lastname'] ?></td>
                                                                <td class="text-center"><? echo $student['section_name'] ?></td>
                                                                <td class="text-center"><a href="<? echo base_url('/admin/reactivateStudent/' . $student['user_id'] . ''); ?>" class="btn btn-sm btn-warning" style="text-decoration: none">Reactivate</a></td>
                                                            </tr>
    <? } ?>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div id="InActiveStudentsPager" class="pager">
                                                <form class="form-inline">
                                                    <div class="form-group">
                                                        <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                        <span class="glyphicon glyphicon-backward  prev">  </span>
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                    </div>
                                                    <div class="form-group">
                                                        <span class="glyphicon glyphicon-forward  next">  </span>
                                                        <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                    </div>
                                                    <div class="form-group">
                                                        <select class="pagesize form-control input-sm "  >
                                                            <option selected="selected"  value="10">10</option>
                                                            <option value="20">20</option>
                                                            <option value="30">30</option>
                                                            <option  value="40">40</option>
                                                        </select></div>
                                                </form>
                                            </div>
<? }
else echo '<h3 class="text-center text-danger">NO INACTIVE USERS AVAILABLE TO VIEW.</h3></div>' ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tab-pane <? if (isset($activeMenu)) {if ($activeMenu == 'sections') echo 'active' ;} ?> fade in" id="sections">
                        <div class="panel panel-primary">
                            <div class="panel-heading">Section > <span id="tabNameSections">Active Sections</span></div>
                            <div class="panel-body">
                                <ul class="nav nav-tabs" id="myTablia">
                                    <li class="active text-center"><a href="#activeSections" data-toggle="tab" onclick='$("#tabNameSections").text("Active Sections");'>Active Sections <span class="badge"><? echo count($activeSections)?></span></a></li>
                                    <li class="text-center"><a href="#inactiveSections" data-toggle="tab" onclick='$("#tabNameSections").text("Inactive Sections");'>Inactive Sections <span class="badge"><? echo count($inactiveSections)?></span></a></li>
                                </ul>
                                <div id="itemContent" class="tab-content">
                                    <div class="tab-pane fade active in" id="activeSections"  style="padding-top:2%">
                    <? if (isset($activeMenuTab)) if ($activeMenuTab == 'activeSections') { ?>
                                                <div class="col-md-12">
                                                    <div class="alert alert-success alert-dismissable">
                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                                 <? echo $alert; ?>
                                                    </div>    
                                                </div>
                                                                <? } ?>
                                        <div class="row">
                                            <div class="col-md-4" >
                                              
                                                    <div class="well">
                                                <form method="post" action="<? echo base_url('admin/addSection/')?>">
                                                <div class="form-group">
                                                    <label class="control-label">Section Name:</label>
                                                    <input onkeydown="return alphaValidator(event);" type="text" id="sectionName" name="sectionName" class="form-control input-sm" placeholder="Name" <?if (empty($activeModerators)) echo 'disabled'?>/>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label">Moderator:</label>
                                                    <select class="form-control input-sm" id="moderatorName" name="moderatorName" <?if (empty($activeModerators)) echo 'disabled'?>>
                               
                              <?foreach ($activeModerators as $moderator){?>
                                     <option value="<?echo $moderator['user_id'];?>"><?echo $moderator['username'];?></option>           
                              <?}?>
                                                            </select>
                                                </div>
                                                <div class="text-center">
                                                    <div class="tiptext" <?if (empty($activeModerators)) echo 'data-toggle="tooltip" data-placement="top" title="" data-original-title="You cant add sections if there are no active moderators."';?>><button onclick ="checkAddSection()"  class="btn btn-sm btn-primary <?if (empty($activeModerators)) echo 'disabled'?>" style="text-decoration: none">Add Section</button></div>
                                                </div>
                                                    </form>
                                                    </div>
                                                  
                                            </div>
                                            <div class="col-md-8">
                                                <?if (!empty($activeSections)){?>
                                                <div class="form-inline pull-right" style="margin-bottom:2%">
                                                    <div class="form-group">
                                                        <input type="search" class="form-control input-sm light-table-filter" data-table="actSection" placeholder="Search..">
                                                    </div>
                                                </div>
                                                <div class="table-responsive">
                                                <table id="ActiveSections" class="actSection table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center" width=30%>Section Name</th>
                                                            <th class="text-center" width=30%>Moderator</th>
                                                            <th class="text-center" width=30%>Number of Students</th>
                                                            <th class="text-center" width=5%></th>
                                                            <th class="text-center" width=5%></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <? foreach ($activeSections as $sections) {foreach ($sections as $section){ ?>
                                                            <tr>
                                                                <td class="text-center"><? echo $section['section_name'] ?></td>
                                                                <td class="text-center"><? echo $section['username'] ?></td>
                                                                <td class="text-center"><? echo $section['number'] ?></td>
                                                                <td class="text-center"><button href="#" onclick="editSection(<? echo $section['section_id'].",".$section['user_id'].",'".$section['section_name'] ."','".$section['username']."'"?>);" class="btn btn-sm btn-warning" style="text-decoration: none">Edit</button></td>
                                                                <td class="text-center"><div class="tiptext" <?if($section['number']!=0)echo 'data-toggle="tooltip" data-placement="left" title="" data-original-title="You cant deactivate sections if there are students assigned."';?>><button onClick="deactivatesectionConfirm(<?echo $section['section_id'] ?>);" class="btn btn-sm btn-danger" style="text-decoration: none" <?if($section['number']!=0)echo 'disabled';?>>Deactivate</button></div></td>
                                                            </tr>
                                                                <? }} ?>
                                                    </tbody>
                                                </table>
                                            </div>
                                                <div id="ActiveSectionsPager" class="pager">
                                            <form class="form-inline">
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                    <span class="glyphicon glyphicon-backward  prev">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                </div>
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-forward  next">  </span>
                                                    <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <select class="pagesize form-control input-sm "  >
                                                        <option selected="selected"  value="10">10</option>
                                                        <option value="20">20</option>
                                                        <option value="30">30</option>
                                                        <option  value="40">40</option>
                                                    </select></div>
                                            </form>
                                        </div>
                                            </div>
                                            <? }
else echo '<h3 class="text-center text-danger">NO SECTIONS AVAILABLE TO VIEW.</h3></div>' ?>
                                        </div>	
                                    </div>

                                    <div class="tab-pane fade in" id="inactiveSections"  style="padding-top:2%">
                                        <div class="col-md-12">
<? if (!empty($inactiveSections)) { ?>
                                                <div class="form-inline pull-right" style="margin-bottom:2%">
                                                    <div class="form-group">
                                                        <input type="search" class="form-control input-sm light-table-filter" data-table="inactSection" placeholder="Search..">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="table-responsive">
                                                <table id="inActiveSections" class="inactSection table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center" width=40%>Section Name</th>
                                                            <th class="text-center" width=40%>Moderator</th>
                                                            <th class="text-center" width=20%></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <?foreach ($inactiveSections as $sections) {foreach ($sections as $section){ ?>
                                                            <tr>
                                                                <td class="text-center"><? echo $section['section_name'] ?></td>
                                                                <td class="text-center"><? echo $section['username'] ?></td>
                                                                <td class="text-center"><a href="<? echo base_url('/admin/reactivateSection/' . $section['section_id'] . ''); ?>" class="btn btn-sm btn-warning" style="text-decoration: none">Reactivate</a></td>
                                                            </tr>
                                                        <? } }?>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div id="InActiveSectionsPager" class="pager">
                                                <form class="form-inline">
                                                    <div class="form-group">
                                                        <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                        <span class="glyphicon glyphicon-backward  prev">  </span>
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                    </div>
                                                    <div class="form-group">
                                                        <span class="glyphicon glyphicon-forward  next">  </span>
                                                        <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                    </div>
                                                    <div class="form-group">
                                                        <select class="pagesize form-control input-sm "  >
                                                            <option selected="selected"  value="10">10</option>
                                                            <option value="20">20</option>
                                                            <option value="30">30</option>
                                                            <option  value="40">40</option>
                                                        </select></div>
                                                </form>
                                            </div>
<? }
else echo '<h3 class="text-center text-danger">NO INACTIVE SECTIONS AVAILABLE TO VIEW.</h3></div>' ?>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        
                        <div class="tab-pane <? if (isset($activeMenu)) {if ($activeMenu == 'moderators') echo 'active' ;} ?>  fade in" id="moderators">
                        <div class="panel panel-primary">
                            <div class="panel-heading">Moderators > <span id="tabNameModerators">Active Moderators</span></div>
                            <div class="panel-body">
                                <ul class="nav nav-tabs" id="myTablia">
                                    <li class="active text-center"><a href="#activeModerators" data-toggle="tab" onclick='$("#tabNameModerators").text("Active Moderators");'>Active Moderators <span class="badge"><? echo count($activeModerators)?></span></a></li>
                                    <li class="text-center"><a href="#inactiveModerators" data-toggle="tab" onclick='$("#tabNameModerators").text("Inactive Moderators");'>Inactive Moderators <span class="badge"><? echo count($inactiveModerators)?></span></a></li>
                                </ul>
                                <div id="itemContent" class="tab-content">
                                    <div class="tab-pane fade active in" id="activeModerators"  style="padding-top:2%">
                                        <? if (!empty($activeModerators)) { ?>
                                        <div class="col-md-12">
                                            <a href="<?echo base_url('/admin/addModerator');?>"  class="btn btn-sm btn-default" style="text-decoration: none">Add Moderator</a>
                                            <div class="form-inline pull-right" style="margin-bottom:2%">
                                                <div class="form-group">
                                                    <input type="search" class="form-control input-sm light-table-filter" data-table="actMod" placeholder="Search..">
                                                </div>
                                            </div>

                                        </div>
                                        <? if (isset($activeMenuTab)) if ($activeMenuTab == 'activeModerators') { ?>
                                                <div class="col-md-12">
                                                    <div class="alert alert-success alert-dismissable">
                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                                 <? echo $alert; ?>
                                                    </div>    
                                                </div>
                                                                <? } ?>
                                        <div class="table-responsive">
                                            <table id="ActiveModerators" class="actMod table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center" width=20%>User Name</th>
                                                        <th class="text-center" width=30%>Moderator Name</th>
                                                        <th class="text-center" width=10%></th>
                                                        <th class="text-center" width=10%></th>
                                                        <th class="text-center" width=15%></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
<? foreach ($activeModerators as $moderator) { ?>
                                                        <tr>
                                                            <td class="text-center"><? echo $moderator['username'] ?></td>
                                                            <td class="text-center"><? echo $moderator['firstname'] . ' ' . $moderator['lastname'] ?></td>
                                                            <td class="text-center"><a href="<? echo base_url('/admin/editModerator/' . $moderator['user_id'] . ''); ?>" class="btn btn-sm btn-warning" style="text-decoration: none">Edit</a></td>
                                                            <td class="text-center"><button href="#" onclick="deleteConfirm(<? echo $moderator['user_id'] ?>,'moderator');"  class="btn btn-sm btn-danger" style="text-decoration: none">Deactivate</button></td>
                                                            <td class="text-center"><button href="#" onclick="resetPassword(<? echo $moderator['user_id'] ?>,'moderator');"  class="btn btn-sm btn-primary" style="text-decoration: none">Reset Password</button></td>
                                                        </tr><!--href="<? //echo base_url('/moderator/deleteStudent/'.$student['user_id'].'');    ?>"-->
<? } ?>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div id="ActiveModeratorsPager" class="pager">
                                            <form class="form-inline">
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                    <span class="glyphicon glyphicon-backward  prev">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                </div>
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-forward  next">  </span>
                                                    <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <select class="pagesize form-control input-sm "  >
                                                        <option selected="selected"  value="10">10</option>
                                                        <option value="20">20</option>
                                                        <option value="30">30</option>
                                                        <option  value="40">40</option>
                                                    </select></div>
                                            </form>
                                        </div>
                                        <? }
else{?> <div class="col-md-12">
                                            <a href="<?echo base_url('/admin/addModerator');?>"  class="btn btn-sm  btn-default pull-right" style="text-decoration: none;margin-bottom: 1%">Add Moderator</a>
         

                                        </div>
                                         <? if (isset($activeMenuTab)) if ($activeMenuTab == 'activeModerators') { ?>
                                                <div class="col-md-12">
                                                    <div class="alert alert-success alert-dismissable">
                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                                 <? echo $alert; ?>
                                                    </div>    
                                                </div>
                                                                <? } ?>
<h3 class="text-center text-danger">NO ACTIVE MODERATORS AVAILABLE TO VIEW.</h3><?}?>
                                    </div>	

                                    <div class="tab-pane fade in" id="inactiveModerators"  style="padding-top:2%">
                                        <div class="col-md-12">
<? if (!empty($inactiveModerators)) { ?>
                                                <div class="form-inline pull-right" style="margin-bottom:2%">
                                                    <div class="form-group">
                                                        <input type="search" class="form-control input-sm light-table-filter" data-table="inactmod" placeholder="Search..">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="table-responsive">
                                                <table id="inActiveModerators" class="inactMod table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center" width=30%>User Name</th>
                                                            <th class="text-center" width=30%>Moderator Name</th>
                                                            <th class="text-center" width=15%></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <? foreach ($inactiveModerators as $moderator) { ?>
                                                            <tr>
                                                                <td class="text-center"><? echo $moderator['username'] ?></td>
                                                                <td class="text-center"><? echo $moderator['firstname'] . ' ' . $moderator['lastname'] ?></td>
                                                                <td class="text-center"><a href="<? echo base_url('/admin/reactivateModerator/' . $moderator['user_id'] . ''); ?>" class="btn btn-sm btn-warning" style="text-decoration: none">Reactivate</a></td>
                                                            </tr>
    <? } ?>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div id="inActiveModeratorsPager" class="pager">
                                                <form class="form-inline">
                                                    <div class="form-group">
                                                        <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                        <span class="glyphicon glyphicon-backward  prev">  </span>
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                    </div>
                                                    <div class="form-group">
                                                        <span class="glyphicon glyphicon-forward  next">  </span>
                                                        <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                    </div>
                                                    <div class="form-group">
                                                        <select class="pagesize form-control input-sm "  >
                                                            <option selected="selected"  value="10">10</option>
                                                            <option value="20">20</option>
                                                            <option value="30">30</option>
                                                            <option  value="40">40</option>
                                                        </select></div>
                                                </form>
                                            </div>
<? }
else echo '<h3 class="text-center text-danger">NO INACTIVE MODERATORS AVAILABLE TO VIEW.</h3></div>' ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <div class="container" >
        <p class="text-center" style="color:white;margin:19px;">My Reading Laboratory. Copyright <? echo date("Y"); ?> © </p>
    </div>
</div>

<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="margin-left: 35%">
        <div class="modal-content" style="width:70%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Deactivate</h4>
            </div>
            <div class="modal-body">
                <span id="deactivateMessage"></span>
            </div>

            <div class="modal-footer">
                <a href="#" id="deleteLink" class="btn btn-primary btn-sm" style="">YES</a>
                <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">CANCEL</button>
            </div> 

        </div>
    </div>
</div>

<div class="modal fade" id="resetPass" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog" style="margin-left: 35%">
        <div class="modal-content" style="width:70%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Reset Password</h4>
            </div>
            <div class="modal-body">
                <span id="resetMessage"></span>
            </div>

            <div class="modal-footer">
                <a href="#" id="resetLink" class="btn btn-primary btn-sm" style="">YES</a>
                <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">CANCEL</button>
            </div> 

        </div>
    </div>
</div>

<div class="modal fade" id="sectionError" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="margin-left: 35%">
        <div class="modal-content" style="width:70%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Error</h4>
            </div>
            <div class="modal-body">
               <span id="sectionErrorText"></span>
            </div>

            <div class="modal-footer">
                <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">OK</button>
            </div> 

        </div>
    </div>
</div>

<div class="modal fade" id="changePass" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top: 5%">
    <div class="modal-dialog" style="margin-left: 35%;">
        <div class="modal-content" style="width:80%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Change Password</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12" id="passwordError" style="display:none">
                    <div class="alert alert-danger">
                        <button type="button" class="close" onclick="document.getElementById('passwordError').style.display = 'none';" aria-hidden="true">&times;</button>
                        New password is not the same with the confirmation password.
                    </div>    
                </div>
                <form class="form-horizontal" id="changePassForm" method="post" action="<?php echo base_url('admin/changePassword/' . $profile['user_id']); ?>">
                    <div class="form-group">
                        <label class="col-sm-5 control-label">Current Password:</label>
                        <div class="col-sm-5">
                            <input type="password" id="currentPass" name="currentPass" class="form-control input-sm" placeholder="Current Password" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-5 control-label">New Password:</label>
                        <div class="col-sm-5">
                            <input type="password" id="newPass" name="newPass" class="form-control input-sm" placeholder="New Password" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-5 control-label">Confirm Password:</label>
                        <div class="col-sm-5">
                            <input type="password" id="confirmPass" name="confirmPass" class="form-control input-sm" placeholder="Confirm Password" />
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button   onClick="changePass()" class="btn btn-primary btn-sm">Change Password</button>
                        <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    </div> 
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deactivatesection" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="margin-left: 35%">
        <div class="modal-content" style="width:70%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Deactivate</h4>
            </div>
            <div class="modal-body">
                Are you sure that you want to deactivate this section?
            </div>

            <div class="modal-footer">
                <a href="#" id="deactivateSectionLink" class="btn btn-primary btn-sm" style="">YES</a>
                <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">CANCEL</button>
            </div> 

        </div>
    </div>
</div>
    
<div class="modal fade" id="editSection" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top: 5%">
    <div class="modal-dialog" style="margin-left: 35%;">
        <div class="modal-content" style="width:80%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Edit Section</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12" id="secError" style="display:none">
                    <div class="alert alert-danger">
                        <button type="button" class="close" onclick="document.getElementById('secError').style.display = 'none';" aria-hidden="true">&times;</button>
                       <span id="secErrorText"></span>
                    </div>    
                </div>
                <form class="form-horizontal" id="changeSectionForm" method="post" action="#">
                    <div class="form-group">
                        <label class="col-sm-5 control-label">Section name:</label>
                        <div class="col-sm-5">
                            <input onkeydown="return alphaValidator(event);" type="text" id="section_name" name="secName" class="form-control input-sm" placeholder="Name.." />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-5 control-label">Moderator:</label>
                        <div class="col-sm-5">
                            <select class="form-control input-sm" id="moderatorNameEdit"  name="moderatorName" >
                               
                              <?foreach ($activeModerators as $moderator){?>
                                     <option value="<?echo $moderator['user_id'];?>"><?echo $moderator['username'];?></option>           
                              <?}?>
                                                            </select>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button id="updateSectionLink" class="btn btn-primary btn-sm">Update</button>
                        <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    </div> 
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function checkEditSection(section_name,moderator){
        var oldName = section_name.toLowerCase().trim();
        var oldModerator = moderator;
        var newName = document.getElementById('section_name').value.toLowerCase().trim();;
        var moderatorNameEdit = $("#moderatorNameEdit option:selected").text().toLowerCase().trim();
        
        if(oldName == newName && moderatorNameEdit == oldModerator){
            return;
        }
        
        if(newName===''){
            $("#secErrorText").text("Section name cannot be empty.");
             document.getElementById('secError').style.display = '';
            event.preventDefault();
                                  return;
                              }
                              
        var tableActive = document.getElementById('ActiveSections');
        if(tableActive != null){
        for (var r = 1, n = tableActive.rows.length; r < n; r++) {
                var section = tableActive.rows[r].cells[0].innerHTML.toLowerCase().trim();;
                var moderator = tableActive.rows[r].cells[1].innerHTML.toLowerCase().trim();
                if(section == newName && moderator == moderatorNameEdit ){
                    event.preventDefault();
                    $("#secErrorText").text("That section name is already being used by the moderator. Please select another one.");
             document.getElementById('secError').style.display = '';
                                  return;
                              }
                }
        }

        var tableinActive = document.getElementById('inActiveSections');
        if(tableinActive != null){
        for (var r = 1, n = tableinActive.rows.length; r < n; r++) {
                var section = tableinActive.rows[r].cells[0].innerHTML.toLowerCase().trim();;
                var moderator = tableinActive.rows[r].cells[1].innerHTML.toLowerCase().trim();
               if(section == newName && moderator == moderatorNameEdit ){
                    event.preventDefault();
                    $("#secErrorText").text("That section name is already being used by the moderator. Please select another one.");
             document.getElementById('secError').style.display = '';
                                  return;
                }
        }
        }
        
    }
    function editSection(sec_id,user_id,section_name,moderator){
    document.getElementById('secError').style.display = 'none';
        event.preventDefault();
                                    $('#editSection').modal({}).css({
                                        'padding-top': function() {
                                            return '10' + '%';
                                        }
                                    });
                                    document.getElementById('section_name').value=section_name ; 
                                    $("#moderatorNameEdit").val(user_id);
                                    $("#changeSectionForm").attr("action", "<? echo base_url('admin/updateSection/') ?>/" + sec_id);
                                    $("#updateSectionLink").attr("onclick","checkEditSection('"+section_name+"','"+moderator+"')");
                                }
                                
    function checkAddSection(){
        var section_name =  document.getElementById('sectionName').value.toLowerCase().trim();
        var moderator_name = $("#moderatorName option:selected").text().toLowerCase().trim();
        if(section_name===''){
            event.preventDefault();
            $('#sectionError').modal({}).css({
                                        'padding-top': function() {
                                          return '10' + '%';
                                      }
                                  });
                                  $("#sectionErrorText").text("Section name cannot be empty.");
                                  return;
                              }
        
        var tableActive = document.getElementById('ActiveSections');
        if(tableActive != null){
        for (var r = 1, n = tableActive.rows.length; r < n; r++) {
                var section = tableActive.rows[r].cells[0].innerHTML.toLowerCase().trim();;
                var moderator = tableActive.rows[r].cells[1].innerHTML.toLowerCase().trim();
                if(section == section_name && moderator == moderator_name ){
                    event.preventDefault();
                    $('#sectionError').modal({}).css({
                                        'padding-top': function() {
                                          return '10' + '%';
                                      }
                                  });
                                  $("#sectionErrorText").text("That section name is already being used by the moderator. Please select another one.");
                                  return;
                              }
                }
        }

        var tableinActive = document.getElementById('inActiveSections');
        if(tableinActive != null){
        for (var r = 1, n = tableinActive.rows.length; r < n; r++) {
                var section = tableinActive.rows[r].cells[0].innerHTML.toLowerCase().trim();;
                var moderator = tableinActive.rows[r].cells[1].innerHTML.toLowerCase().trim();
                if(section == section_name && moderator == moderator_name ){
                    event.preventDefault();
                    $('#sectionError').modal({}).css({
                                        'padding-top': function() {
                                          return '10' + '%';
                                      }
                                  });
                                  $("#sectionErrorText").text("That section name is already being used by the moderator. Please select another one.");
                                  return;
                              }
                }
        }
    }
                                    function changePass() {
                                    var newPassText = document.getElementById('newPass').value;
                                    var confirmPassText = document.getElementById('confirmPass').value;

                                    if ( newPassText != confirmPassText || newPassText == '' || confirmPassText == '') {
                                        document.getElementById('passwordError').style.display = '';
                                        event.preventDefault();
                                    }
                                }

                                function deleteConfirm(id,type) {
                                    event.preventDefault();
                                    $('#delete').modal({}).css({
                                        'padding-top': function() {
                                            return '10' + '%';
                                        }
                                    });
                                    if(type=='student'){
                                        $("#deactivateMessage").text("Are you sure that you want to deactivate this student?");
                                        $("#deleteLink").attr("href", "<? echo base_url('admin/deactivateStudent/') ?>/" + id);
                                    }else if(type=='moderator'){
                                       $("#deactivateMessage").text("Are you sure that you want to deactivate this moderator?");
                                        $("#deleteLink").attr("href", "<? echo base_url('admin/deactivateModerator/') ?>/" + id);
                                    }
                                }
                                
                                 function deactivatesectionConfirm(id) {
                                    event.preventDefault();
                                    $('#deactivatesection').modal({}).css({
                                        'padding-top': function() {
                                            return '10' + '%';
                                        }
                                    });
                                    $("#deactivateSectionLink").attr("href", "<? echo base_url('admin/deactivateSection/') ?>/" + id);
                                }

                                function resetPassword(id,type) {
                                    event.preventDefault();
                                    $('#resetPass').modal({}).css({
                                        'padding-top': function() {
                                            return '10' + '%';
                                        }
                                    });
                                    if(type=='student'){
                                        $("#resetMessage").text("Are you sure that you want to reset the password for this student?");
                                        $("#resetLink").attr("href", "<? echo base_url('admin/resetPassword/') ?>/" + id + "/student");
                                    }else if(type=='moderator'){
                                       $("#resetMessage").text("Are you sure that you want to reset the password for this moderator?");
                                       $("#resetLink").attr("href", "<? echo base_url('admin/resetPassword/') ?>/" + id + "/moderator");
                                    }
                                }

                                function showitem(id) {
                                    $("#chart_" + id).show().siblings('[id^="chart"]').hide();

                                }
</script>
